<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--优先使用IE最新版本和Chrome-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chome=1" />
    <!--视口--设备宽度--初始缩放比例--最小缩放比例--最大缩放比例--用户缩放-->
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <!--禁止浏览器自动的识别-电话号码-email--->
    <meta name="format-detection" content="telephone=no,email=no"/>
    <!--是否启用Web全屏-->
    <meta name="apple-mobile-web-app-capable" content='yes' />
    <meta name="apple-mobile-web-status-bar-style" content="normal|black|black-translucent">
    <!--设置苹果工具栏颜色-->
    <meta name="apple-mobile-web-app-status-bar-style" content='black' />
    <link rel="stylesheet" href="css/index.css">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/swiper.min.css">
    <title>仿天猫</title>
    <script src="js/ydfontsize.js"></script>
    <script src="js/swiper.min.js"></script>
    <script src="js/jquery-3.1.1.min.js"></script>
    <script src=""></script>
</head>
<body>
    <!-- 头部固定 -->
    <div class="header">
        <!-- 扫一扫 -->
        <a href="javascript:;" class="t-sao">
            <img src="img/saoyisao.png" alt="">
            <span>扫一扫</span>
        </a>
        <!-- 搜索框 -->
        <div class="t-search">
            <input type="search" placeholder="男士手提包 商务">
            <i class="fa fa-search fa-lg"></i>
        </div>
        <!-- 购物车 -->
        <a href="javascript:;" class="t-che">
            <i class="fa fa-shopping-cart"></i>
        </a>
    </div>
    <!-- 轮播图 -->
    <div class="swiper-container swiper1">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="img/a1.png" alt=""></div>
            <div class="swiper-slide"><img src="img/a2.png" alt=""></div>
            <div class="swiper-slide"><img src="img/a3.png" alt=""></div>
            <div class="swiper-slide"><img src="img/a4.png" alt=""></div>
            <div class="swiper-slide"><img src="img/a5.png" alt=""></div>
            <div class="swiper-slide"><img src="img/a6.png" alt=""></div>
        </div>
        <!-- 小圆点 -->
        <div class="swiper-pagination"></div>
    </div>
    <!-- 按钮组 -->
    <ul class="anniu">
        <li index="0">
            <img src="img/ant1.png" alt="">
            <span>生鲜水果</span>
        </li>
        <li index="1">
            <img src="img/ant2.png" alt="">
            <span>休闲零食</span>
        </li>
        <li index="2">
            <img src="img/ant3.png" alt="">
            <span>奶品水饮</span>
        </li>
        <li index="3">
            <img src="img/ant4.png" alt="">
            <span>粮油厨房</span>
        </li>
        <li index="4">
            <img src="img/ant5.png" alt="">
            <span>家用电器</span>
        </li>
        <li index="5">
            <img src="img/ant6.png" alt="">
            <span>母婴用品</span>
        </li>
        <li index="6">
            <img src="img/ant7.png" alt="">
            <span>洗护美妆</span>
        </li>
        <li index="7">
            <img src="img/ant8.png" alt="">
            <span>家清家居</span>
        </li>
        <li index="8">
            <img src="img/ant9.png" alt="">
            <span>一次用品</span>
        </li>
        <li index="9">
            <img src="img/ant10.png" alt="">
            <span>收纳日用</span>
        </li>
    </ul>
    <!-- 淘宝头条 -->
    <div class="toutiao">
        <img src="img/toutiao.png" alt="">
        <div class="demo">
            <ul>
                <li>
                    <span>热文</span><a href="javascript:;" target="_blank">vivo全面屏手机9月21日发布</a>
                </li>
                <li>
                    <span>热议</span><a href="javascript:;" target="_blank">iPhone X玩《王者荣耀》什么样?这视野吓一跳</a>
                </li>
                <li>
                    <span>热文</span><a href="javascript:;" target="_blank">男生19-28岁,应该扔掉的几样东西!</a>
                </li>
                <li>
                    <span>热议</span><a href="javascript:;" target="_blank">16G不够用,ios11为内存带来福音</a>
                </li>
                <li>
                    <span>热文</span><a href="javascript:;" target="_blank">大一男生vs大四男生,三图告诉你变了啥</a>
                </li>
                <li>
                    <span>热议</span><a href="javascript:;" target="_blank">iPhone X跑分出炉: 安卓集体膜拜</a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 北京精选 -->
    <div class="section1">
        <a href="javascript:;"><img src="img/bi1.png" alt=""></a>
        <a href="javascript:;">
            <img src="img/bi2.png" alt="">
            <span class="tag">必抢</span>
        </a>
        <a href="javascript:;">
            <img src="img/bi3.png" alt="">
            <span class="tag">必抢</span>
            <p><b class="tianshu"></b>:<b class="xiaoshi">21</b>: <b class="fenzhong">38</b>: <b class="miaoshu">32</b></p>
        </a>
        <a href="javascript:;"><img src="img/bi4.png" alt=""></a>
        <a href="javascript:;"><img src="img/bi5.png" alt=""></a>
        <a href="javascript:;"><img src="img/bi6.png" alt=""></a>
    </div>
    <!-- 底部切换按钮 -->
    <div class="footer">
        <!-- 首页 -->
        <a href="javascript:;">
            <img src="img/sylog.png" alt="">
            <span>首页</span>
        </a>
        <!-- 物流 -->
        <a href="javascript:;">
            <img src="img/wllog.png" alt="">
            <span>物流</span>
        </a>
        <!-- 购物车 -->
        <a href="html/shopping.html">
            <img src="img/gwlog.png" alt="">
            <span>购物车</span>
        </a>
        <!-- 我的淘宝 -->
        <a href="">
            <img src="img/wdlog.png" alt="">
            <span>我的淘宝</span>
        </a>
        <!-- 更多 -->
        <a href="">
            <img src="img/gdlog.png" alt="">
            <span>更多</span>
        </a>
    </div>
</body>
</html>
<script src="js/index.js"></script>